


const { ccclass, property } = cc._decorator;

@ccclass
export default class ImageTouchCtrl extends cc.Component {
    @property(cc.Node)
    imageNode = null;

    @property(cc.Label)
    cityName = null;

    @property(cc.Label)
    placeName = null;

    @property(cc.Label)
    rankLabel = null;

    @property(cc.Node)
    pointNode = null;

    @property([cc.SpriteFrame])
    cityIamgeSpArr = [];

    cityIndex = 0;
    cityData = null;
    startX = 0;
    touchCount = 0;
    loadSpArr = [];
    u = [[{
        place: "玉龙雪山",
        rank: "云南必打卡旅游地第1名",
        imageIndex: 0
    }, {
        place: "丽江古城",
        rank: "云南亲子出游指南第1名",
        imageIndex: 1
    }, {
        place: "泸沽湖",
        rank: "中国必游推荐打卡第2名",
        imageIndex: 2
    }], [{
        place: "芭东海滩",
        rank: "普吉岛必体验项目榜第1名",
        imageIndex: 3
    }, {
        place: "斯米兰群岛",
        rank: "普吉岛必体验项目榜第2名",
        imageIndex: 4
    }, {
        place: "蜜月岛",
        rank: "普吉岛必打卡旅游地第2名",
        imageIndex: 5
    }], [{
        place: "灵隐寺",
        rank: "杭州西湖必去景点第1名",
        imageIndex: 6
    }, {
        place: "西湖风景区",
        rank: "杭州亲子出游指南第1名",
        imageIndex: 7
    }, {
        place: "千岛湖风景区",
        rank: "杭州周末好去处推荐第1名",
        imageIndex: 8
    }], [{
        place: "成都大熊猫繁育研究基地",
        rank: "四川推荐必打卡第1名",
        imageIndex: 9
    }, {
        place: "武侯祠",
        rank: "成都必逛博物展览第1名",
        imageIndex: 10
    }, {
        place: "都江堰景区",
        rank: "都江堰最美自然风光第1名",
        imageIndex: 11
    }], [{
        place: "长隆野生动物世界",
        rank: "广州推荐必打卡第1名",
        imageIndex: 12
    }, {
        place: "广州塔",
        rank: "广东必去地标建筑第1名",
        imageIndex: 13
    }, {
        place: "沙面岛",
        rank: "广州夜景大赏第2名",
        imageIndex: 14
    }], [{
        place: "新加坡环球影城",
        rank: "新加坡必体验娱乐项目第1名",
        imageIndex: 15
    }, {
        place: "新加坡动物园",
        rank: "新加坡必玩动植物园第2名",
        imageIndex: 16
    }, {
        place: "圣淘沙岛",
        rank: "新加坡必玩动植物园第1名",
        imageIndex: 17
    }], [{
        place: "香港迪士尼乐园",
        rank: "香港欢愉亲子推荐地第2名",
        imageIndex: 18
    }, {
        place: "维多利亚港",
        rank: "香港本地达人推荐第1名",
        imageIndex: 19
    }, {
        place: "香港海洋公园",
        rank: "香港欢愉亲子推荐地第4名",
        imageIndex: 20
    }], [{
        place: "呼伦贝尔大草原",
        rank: "内蒙古最佳草原骑马地第1名",
        imageIndex: 21
    }, {
        place: "套娃景区",
        rank: "呼伦贝尔俄式风情榜第1名",
        imageIndex: 22
    }, {
        place: "莫尔格勒河",
        rank: "呼伦贝尔推荐必打卡第3名",
        imageIndex: 23
    }], [{
        place: "东京塔",
        rank: "东京本地必游第2名",
        imageIndex: 24
    }, {
        place: "浅草寺",
        rank: "东京本地必游第1名",
        imageIndex: 25
    }, {
        place: "东京迪士尼乐园",
        rank: "东京亲子出游指南第1名",
        imageIndex: 26
    }], [{
        place: "大皇宫",
        rank: "曼谷必游景点第1名",
        imageIndex: 27
    }, {
        place: "郑王庙",
        rank: "泰国必打卡旅游地第1名",
        imageIndex: 28
    }, {
        place: "玉佛寺",
        rank: "曼谷宗教胜地排行榜第5名",
        imageIndex: 29
    }], [{
        place: "洪崖洞民俗风貌区",
        rank: "重庆夜景观赏地第1名",
        imageIndex: 30
    }, {
        place: "解放碑",
        rank: "重庆推荐必打卡第5名",
        imageIndex: 31
    }, {
        place: "磁器口古镇",
        rank: "重庆老街古镇盘点第1名",
        imageIndex: 32
    }], [{
        place: "鼓浪屿",
        rank: "厦门周末好去处推荐第1名",
        imageIndex: 33
    }, {
        place: "南普陀寺",
        rank: "厦门推荐必打卡第5名",
        imageIndex: 34
    }, {
        place: "厦门大学",
        rank: "厦门推荐必打卡第4名",
        imageIndex: 35
    }]]
    onLoad() {
        this.addEvent();
    }

    addEvent() {
        this.imageNode.on("touchstart", this.onTouchStart, this);
        this.imageNode.on("touchmove", this.onTouchMove, this);
        this.imageNode.on("touchend", this.onTouchEnd, this);
        this.imageNode.on("touchcancel", this.onTouchCanCel, this);
    }

    removeEvent() {
        this.imageNode.off("touchstart", this.onTouchStart, this);
        this.imageNode.off("touchmove", this.onTouchMove, this);
        this.imageNode.off("touchend", this.onTouchEnd, this);
        this.imageNode.off("touchcancel", this.onTouchCanCel, this);
    }

    initData(e) {
        if (e) {
            var t = e.index, a = e.name;
            this.cityIndex = t;
            this.cityData = u[t];
            this.touchCount = 0;
            this.startX = 0;
            this.cityName.string = a;
            this.setCurCityShow();
        }
    }

    setCurCityShow() {
        if (this.touchCount < 0 || this.touchCount > 2) {
            console.log("滑动次数有问题请检查");
        } else {
            var e = this.cityData[this.touchCount],
                t = e.place,
                a = e.rank,
                o = e.imageIndex;
            this.placeName.string = t;
            this.rankLabel.string = a;
            this.imageNode.getComponent(cc.Sprite).spriteFrame = this.cityIamgeSpArr[o];
            this.setPointShow();
        }
    }

    setPointShow() {
        var e = this.pointNode.children;
        for (var t = 0; t < e.length; t++) {
            var a = e[t],
                o = a.getChildByName("common"),
                i = a.getChildByName("select");
            o.active = t != this.touchCount;
            i.active = t == this.touchCount;
        }
    }

    isHaveDoneLoad(e) {
        for (var t = 0; t < this.loadSpArr.length; t++) {
            var a = this.loadSpArr[t];
            if (a.index == e) return a;
        }
        return null;
    }

    onDestroy() {
        this.removeEvent();
    }

    onTouchStart(e) {
        this.startX = e.getLocationX();
    }

    onTouchMove() { }

    onTouchEnd(e) {
        var t = e.getLocationX() - this.startX;
        if (t > 0) {
            this.touchCount -= 1;
            this.touchCount = this.touchCount < 0 ? 0 : this.touchCount;
            console.log("向右滑动结束时的逻辑");
        } else if (t < 0) {
            this.touchCount += 1;
            this.touchCount = this.touchCount > 2 ? 2 : this.touchCount;
            console.log("向左滑动结束时的逻辑");
        }
        this.setCurCityShow();
    }

    onTouchCanCel(e) {
        var t = e.getLocationX() - this.startX;
        if (t > 0) {
            this.touchCount -= 1;
            this.touchCount = this.touchCount < 0 ? 0 : this.touchCount;
            console.log("向右滑动结束时的逻辑");
        } else if (t < 0) {
            this.touchCount += 1;
            this.touchCount = this.touchCount > 2 ? 2 : this.touchCount;
            console.log("向左滑动结束时的逻辑");
        }
        this.setCurCityShow();
    }

    clickClose() {
        this.node.active = false;
    }
}